<template>
	<!-- 编辑账簿 -->
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<view class="flex-col section_1">
					<text class="text_1">创建合同时间</text>
					<view class="justify-between group_2">
						<text class="text_2">编辑时间：</text>
						<view class="flex-row group_3">
							<view class="un
							i-list-cell-db ">
								<picker mode="date" :value="date" @change="bindDateChange">
									<view class="flex-row">
										<text class="text_3 uni-input">{{date}}</text>
										<view class="display:inline-block" @click="editshow = true">
											<image :src="$IMG_URL+'index/goright.png'" class="image_1 image_222" />
										</view>
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<text class="text_4">合同简述：</text>
				<view class="flex-col group_4">
					<view class="flex-col section_2">
						<view class="justify-between group_5">
							<view class="flex-row">
								<image :src="$IMG_URL+'16557836966004751365.png'" class="image_3" />
								<text class="text_5" style="margin-top: 5rpx; ">名称</text>
							</view>
							<text class="text_7">
								<input type="text" v-model="list.name">
							</text>
						</view>
						<view class="justify-between group_7">
							<text class="text_8 text_9">合同类型</text>
							<view class="flex-row">
								<u-picker :show="Typeshow" :value='typeindex' :columns="Typecolumns" keyName="Typelabel"
									@cancel='Typeshow = false' @confirm='typeConfim'></u-picker>
								<text class="text_10" ref="">{{Typelabel}}</text>
								<view class="" @click="Typeshow = true">

									<image :src="$IMG_URL+'index/goright.png'" class="image_1 image_5" mode="" />
								</view>
							</view>
						</view>
						<view class="justify-between group_9">
							<text class="text_11">原合同额</text>
							<view class="text_13 text_14 flex-row ">
								<view style="transform:translateX(150rpx); ">¥</view>
								<input style="margin-left: 45%;" type="text" v-model="list.originalAccount"
									@blur="changeHT">
							</view>
						</view>
					</view>
					<view class="flex-col section_2 view_2" v-for="(item,i) in arrlist" :key="i">
						<view class="justify-between group_10">
							<view class="flex-row group_11">
								<image :src="$IMG_URL+'16557836966004751365.png'" class="image_3" />
								<text class="text_5" style="margin-top: 5rpx; ">第{{item.num}}次收款</text>
							</view>
							<view class="text_16 flex-row" style="text-align: left;">
								<view style="margin-top: 10rpx;">¥</view>
								<input style="margin-left: 10rpx;" type="text" v-model="item.amount" @blur='listchange(i)'>
							</view>
						</view>
						<view class="justify-between group_7">
							<text class="text_8">付款比例</text>
							<text class="text_19">{{item.percent}}</text>
						</view>
						<view class="justify-between group_12">
							<text class="text_11">付款时间</text>
							<view class="flex-row text_13">
								<picker mode="date" :value="item.payTime" @change="(e)=>{bindReatDateChange(e,index)}">
									<view class="uni-input flex-row">
										<text class="text_21">{{item.payTime}}</text>
										<image :src="$IMG_URL+'index/goright.png'" class="image_1 image_7" />
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="flex-col section_2 view_2" v-if="addbtnshow==true">
						<view class="justify-between group_10">
							<view class="flex-row group_11">
								<image :src="$IMG_URL+'16557836966004751365.png'" class="image_3" />
								<view class="text_5 flex-row">
									第{{newnumber}}次付款
								</view>
							</view>
							<text class="text_16">
								<input type="text" placeholder="1000.00" v-model="newdoll" @blur="changesk()">
							</text>
						</view>
						<view class="justify-between group_7">
							<text class="text_8">付款比例</text>
							<text class="text_19">
								<input type="text" placeholder="请输入付款比例" v-model="proportion">

							</text>
							<text>%</text>
						</view>
						<view class="justify-between group_12">
							<text class="text_11">付款时间</text>
							<view class="flex-row text_13">
								<picker mode="date" :value="newTime" @change="newchange">
									<view class="uni-input flex-row">
										<text class="text_21">{{newTime}}</text>
										<image :src="$IMG_URL+'index/goright.png'" class="image_1 image_7" />
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="justify-center section_3" @click="addnewbtn">
						<image :src="$IMG_URL+'16557868010275878721.png'" class="image_11" />
						<text class="text_29">新增付款内容</text>
					</view>
				</view>
				<text class="text_30">总计：</text>
				<view class="flex-col section_4">
					<view class="justify-between">
						<text class="text_31" v-if="optionState == 'accoundEdit'">已收金额</text>
						<text class="text_31" v-else>已付金额</text>
						<text class="text_32">¥{{list.paidAmount}}.00</text>
					</view>
					<view class="justify-between group_15">
						<text class="text_33">未收金额</text>
						<text class="text_34">¥{{list.outstandingAmount}}.00</text>
					</view>
					<view class="justify-between group_16">
						<text class="text_35">合同增项额度</text>
						<text class="text_36">¥{{list.additionAmount}}.00</text>
					</view>
					<view class="justify-between group_17">
						<text class="text_37">总合同额</text>
						<text class="text_38">¥{{list.totalAmount}}.00</text>
					</view>
				</view>
				<text class="text_39">合同附图：</text>
				<view class="flex-row group_18">
					<shop-upload :maxCount="9" :fileList="fileList3" @del="delectPic3" @success='success3'>
					</shop-upload>
				</view>
			</view>
			<view class="flex-col items-center button" @click="returnPer"><text class="text_40">保存</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				optionState: '',
				editshow: false,
				editvalue1: Number(new Date()),
				Typeshow: false,
				Typecolumns: [
					['公单', '自营', '其他']
				],
				title: 'picker',
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				date: currentDate,
				time: '12:01',
				show: false,
				// 图片上传
				fileList3: [],
				HTtype: '公单',
				typeindex: 0,
				Typelabel: '公单',
				array: ['公单', '自营', '其他'],
				index: 0,
				paymentDate: '2022-05-28',

				foremanAmountBookId: '',
				list: '',
				arrlist: '',
				newnumber: '',
				newTime: currentDate,
				newdoll: '',
				proportion: '',
				addbtnshow: false
			};
		},
		onLoad(option) {
			this.foremanAmountBookId = option.id;
			this.getdata()
		},
		methods: {
			changeHT() {
				// 总额
				this.list.totalAmount = Number(this.list.originalAccount) + Number(this.list.additionAmount);
				// 未收金额
				this.list.outstandingAmount = Number(this.list.totalAmount) - Number(this.list.paidAmount);
				// 合同增项额度
				this.list.additionAmount = Number(this.list.totalAmount) - Number(this.list.originalAccount);
			},

			addnewbtn() {
				this.addbtnshow = true;
				this.newnumber = this.arrlist.length+1;
				let arr = {
					num: this.newnumber,
					amount: this.newdoll,
					percent: this.proportion,
					payTime: this.newTime
				}
				if (arr.newdoll == '') {
					this.$u.toast('请填写金额');
					return;
				}
				if (arr.percent == '') {
					this.$u.toast('请填写付款比例');
					return;
				}
				this.newdoll = '';
				this.newnumber++;
				this.proportion = '';
			},
			returnPer() {

				// 图片
				let arrSJ = [];
				this.fileList3.map(item => {
					arrSJ.push(item.url)
				})
				// 其他
				let type;
				if (this.Typelabel == '公单') {
					type = 1
				} else if (this.Typelabel == '自营') {
					type = 2
				} else {
					type = 3
				}
				let foremanAmountDetailsList = [];
				if (this.newnumber > this.arrlist.length) {
					const arr = {
						num: this.newnumber,
						amount: this.newdoll,
						percent: this.proportion,
						payTime: this.newTime
					}

					foremanAmountDetailsList = this.arrlist;
					foremanAmountDetailsList.push(arr)
				} else {
					foremanAmountDetailsList = this.arrlist;
				}
				console.log(foremanAmountDetailsList, 'foremanAmountDetailsList')
				// 列表
				arrSJ = arrSJ.toString()
				const date = {
					id: this.list.id,
					name: this.list.name, //合同名称
					type: type, //合同类型(1公单 2自营 3其他)
					originalAccount: this.list.originalAccount, //原合同额
					paidAmount: this.list.paidAmount, //已付金额
					outstandingAmount: this.list.outstandingAmount, //未收金额
					additionAmount: this.list.additionAmount, //合同增项额度
					totalAmount: this.list.totalAmount, //总合同额
					pictures: arrSJ,
					foremanAmountDetailsList: foremanAmountDetailsList
				};
				this.$http('iwallet.editForemanAmountBook', date).then(res => {
					console.log(res.data, 'res')
					if (res.code == 200) {
						let pageNum = 2
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - pageNum];
						uni.navigateBack({
							success: function() {
								beforePage.$vm.$refs.iWallet.getlist();
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			newchange(e) {
				this.newTime = e.detail.value
			},
			listchange(i){
				// console.log(i)
				// 已付金额
				let amount=0;
				for(let k=0;k<this.arrlist.length;k++){
					// console.log(this.arrlist[k].amount)
					amount=Number(amount)+Number(this.arrlist[k].amount)
				}
				// console.log(amount,'amount')
				this.list.paidAmount=amount
				 // 未收金额= 总额-已付金额
				 let outstandingAmount = Number(this.list.totalAmount)-Number(this.list.paidAmount)
				 if(outstandingAmount>0){
					 this.list.outstandingAmount = Number(this.list.totalAmount)-Number(this.list.paidAmount)
					 return;
				 }
				// // 合同增项额度 = 已付-原合同额
				let additionAmount=Number(this.list.paidAmount)-Number(this.list.totalAmount)
				if(additionAmount>0){
					this.list.additionAmount=Number(this.list.paidAmount)-Number(this.list.totalAmount)
					return;
				}
				// // 总合同额=原+增
				this.list.totalAmount=Number(this.list.originalAccount)+Number(this.list.additionAmount)
			},
			changesk() {
				let amount=0;
				for(let k=0;k<this.arrlist.length;k++){
					amount=Number(amount)+Number(this.arrlist[k].amount)
				}
				this.list.paidAmount=amount+Number(this.newdoll)
				 // 未收金额= 总额-已付金额
				 let outstandingAmount = Number(this.list.totalAmount)-Number(this.list.paidAmount)
				 if(outstandingAmount>0){
					 this.list.outstandingAmount = Number(this.list.totalAmount)-Number(this.list.paidAmount)
					 return;
				 }
				// // 合同增项额度 = 已付-原合同额
				let additionAmount=Number(this.list.paidAmount)-Number(this.list.totalAmount)
				if(additionAmount>0){
					this.list.additionAmount=Number(this.list.paidAmount)-Number(this.list.totalAmount)
					return;
				}
				// // 总合同额=原+增
				this.list.totalAmount=Number(this.list.originalAccount)+Number(this.list.additionAmount)

			},
			getdata() {
				this.$http('iwallet.viewForemanAmountBook', {
					foremanAmountBookId: this.foremanAmountBookId
				}).then(res => {
					console.log(res, '编辑账簿')
					if (res.code == 200) {
						this.list = res.data;
						this.arrlist = res.data.foremanAmountDetailsList;
						if (res.data.pictures != null) {
							const fileList3 = res.data.pictures.split(',')
							for (let i = 0; i < fileList3.length; i++) {
								this.fileList3.push({
									url: fileList3[i]
								})
							}

						} else {
							this.fileList3 = []
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			delectPic3(index) {
				this.fileList3.splice(index, 1);
			},
			success3(file) {
				this.fileList3.push({
					url: file.url
				})
				console.log(this.fileList);
			},
			changeTime(e) {
				this.editshow = false
			},
			editConfim(e) {
				console.log(e);
				this.editshow = false
			},
			editCancel() {
				this.editshow = false
			},
			cancelType(e) {
				console.log(e)
				this.Typeshow = false
			},
			typeConfim(e) {
				console.log(e);
				this.Typelabel = String(e.value);
				console.log(this.Typelabel)
				this.Typeshow = false;
			},

			bindReatDateChange(e, index) {
				console.log(e)
				console.log(index)
				this.arrlist[index].payTime = e.detail.value;
			},
			bindDateChange(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
	};
</script>

<style scoped lang="scss">
	.section_2 {
		padding: 0 22rpx 35rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_10 {
		padding: 30rpx 0 27rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_1 {
		flex-shrink: 0;
		width: 24rpx;
		height: 26rpx;
	}

	.image_3 {
		margin-top: 14rpx;
		flex-shrink: 0;
		border-radius: 50%;
		width: 17rpx;
		height: 17rpx;
	}

	.text_8 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_21 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_7 {
		margin-top: 22rpx;
	}

	.text_11 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_13 {
		margin-top: 6rpx;
	}

	.group_11 {
		margin-bottom: 6rpx;
	}

	.text_16 {
		margin-top: 6rpx;
		color: #ff371d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_16 input {
		width: 200rpx;
		text-align: right;
	}

	.text_5 {
		margin-left: 16rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_7 {
		margin: 3rpx 0 4rpx 22rpx;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 0 24rpx 40rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 20rpx 0;
	}

	.button {
		margin: 44rpx 8rpx 0;
		padding: 19rpx 0 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.section_1 {
		padding: 30rpx 24rpx 35rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_4 {
		margin-top: 37rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_4 {
		margin-top: 34rpx;
	}

	.text_30 {
		margin-top: 37rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_4 {
		margin-top: 34rpx;
		padding: 30rpx 22rpx 35rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_39 {
		margin-top: 37rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_18 {
		margin-top: 34rpx;
	}

	.text_40 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_1 {
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_2 {
		margin-top: 39rpx;
	}

	.view_2 {
		margin-top: 22rpx;
	}

	.view_7 {
		margin-top: 20rpx;
	}

	.section_3 {
		margin-top: 24rpx;
		padding: 9rpx 0 17rpx;
		align-self: flex-end;
		border-radius: 32rpx;
		/* 	background-image: url($IMG_URL+'16557862457510079497.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		border: 1px solid #1d6aff;
		width: 236rpx;
	}

	.group_15 {
		margin-top: 33rpx;
	}

	.group_16 {
		margin-top: 33rpx;
	}

	.group_17 {
		margin-top: 33rpx;
	}

	.group_19 {
		padding-top: 10rpx;
		width: 224rpx;
		position: relative;
	}

	.image-wrapper {
		margin-left: 12rpx;
		margin-top: 10rpx;
		padding: 75rpx 0;
		border-radius: 16rpx;
		background-image: url($IMG_URL+'16557870925370644261.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 214rpx;
		height: 214rpx;
	}

	.text_2 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_3 {
		margin-top: 6rpx;
	}

	.group_5 {
		padding: 30rpx 0 33rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_9 {
		margin-top: 37rpx;
	}

	.group_12 {
		margin-top: 33rpx;
	}

	.group_13 {
		margin-top: 33rpx;
	}

	.image_11 {
		margin-top: 8rpx;
		width: 22rpx;
		height: 22rpx;
	}

	.text_29 {
		margin-left: 19rpx;
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 34rpx;
	}

	.text_31 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_32 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_33 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_34 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_35 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_36 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_37 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_38 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_12 {
		margin-right: 10rpx;
		border-radius: 16rpx;
		width: 214rpx;
		height: 214rpx;
	}

	.image_13 {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.image_14 {
		width: 64rpx;
		height: 64rpx;
	}

	.text_3 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_2 {

		margin-top: 34rpx;
		align-self: flex-start;
		width: 214rpx;
		height: 214rpx;
	}

	.image_222 {
		margin: 3rpx 0 4rpx 14rpx;
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		text-align: right;
	}

	.text_9 {
		margin-bottom: 0;
	}

	.text_14 {
		color: #333333;
		font-size: 30rpx;
		font-family: '.AppleSystemUIFont';
		// line-height: 35rpx;
		text-align: left;
	}

	.text_19 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;

		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_26 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_10 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.image_5 {
		margin-left: 22rpx;
		margin-top: 9rpx;
	}
</style>
